<template>
  <div
    :id="props.id"
    :class="props.required ? 'contact' : 'bg'"
    :style="{ width: props.width, padding: props.padding }"
  >
    <TitleItem :required="true" :title="props.title"></TitleItem>
    <slot>
      <div class="strengths">
        <div class="strength" v-for="item in strengthList">
          <div class="no">{{ item.id }}</div>
          <div class="title">{{ item.title }}</div>
          <div class="text">{{ item.text }}</div>
        </div>
      </div>
    </slot>
  </div>
</template>

<script setup>
const props = defineProps({
  required: {
    type: Boolean,
    required: false,
  },
  width: {
    type: String,
    default: "",
  },
  padding: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: [],
  },
});
//个人优势
const strengthList = ref([
  {
    title: "通过率高77",
    text: "10年服务经验，资深的专家服务团队，熟悉珠三角地区各行业政策、各地区最新环保政策等，已为上千家企业办理过相关环保手续，项目通过率高达99%10年服务经验，资深的专家服务团队，熟悉珠三角地区各行业政策、各地区最新环保政策等，已为上千家企业办理过相关环保手续，项目通过率高达99%",
    icon: "/_nuxt/assets/images/01.png",
    id: "01",
  },
  {
    title: "通过率高77",
    text: "10年服务经验，资深的专家服务团队，熟悉珠三角地区各行业政策、各地区最新环保政策等，已为上千家企业办理过相关环保手续，项目通过率高达99%",
    icon: "/_nuxt/assets/images/02.png",
    id: "02",
  },
  {
    title: "通过率高77",
    text: "10年服务经验，资深的专家服务团队，熟悉珠三角地区各行业政策、各地区最新环保政策等，已为上千家企业办理过相关环保手续，项目通过率高达99%",
    icon: "/_nuxt/assets/images/03.png",
    id: "03",
  },
  {
    title: "通过率高77",
    text: "10年服务经验，资深的专家服务团队，熟悉珠三角地区各行业政策、各地区最新环保政策等，已为上千家企业办理过相关环保手续，项目通过率高达99%",
    icon: "/_nuxt/assets/images/04.png",
    id: "04",
  },
]);
</script>

<style scoped lang="scss">
#id{
  
}
.bg {
  background-color: #fff;
}
.contact {
  background-color: #fff;
  padding: 40px;
  transition: all 0.5s ease-in-out;
}
.contact:hover {
  /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  //box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
  //transform: translateY(-3px);
}
.strengths {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap; /* 防止子元素换行 */
  margin-top: 30px;
  .strength {
    display: inline-block;
    margin-left: 20px;
    width: 290px;
    height: 320px;
    background: url("@/assets/images/serverbg.png") no-repeat;
    block-size: 290px 320px;
    padding: 30px;
    transition: color 0.3s ease-in-out;
    border: 1px solid transparent;
    
    .no {
      width: 50px;
      height: 50px;
      font-size: 30px;
      font-weight: bold;
      color: $green;
    }
    .title {
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .text {
      font-size: 18px;
      color: #787878;
      white-space: wrap;
      text-align: justify;
      height: 150px;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }
    //去除滚动条
    .text::-webkit-scrollbar {
      display: none;
    }
  }
  .strength:hover {
    border: 1px solid $green;
    border-radius: 5px;
    .title {
      color: $green;
    }
  }
  .strength:first-child {
    margin-left: 0;
  }
}
//去除滚动条

.strengths::-webkit-scrollbar {
  display: none;
}
</style>
